For project 4 step 1. We’ll be talking about character styles. In the previous video, we did paragraph styles. Paragraph styles affect the entire paragraph. If you put your type took in there and apply a paragraph style. So if you make it a heading, it will change everything there. If you change body copy, it will adjust back. These are buttons now, where you can adjust size. I can change the different headings. This is an h 5. It effects everything in the paragraph without selecting things. But sometimes you need to adjust just little pieces in the type, or just a few characters or a few words at a time. That is handled under character styles.

Inside character styles, we’ll go back to the original article for just a moment. In the orginial article, you’ll notice that this author writes using some italics for emphasis. So in this case here, we have our web page comes to life through great typography. So this is italic. So we’re going to change this word to italic using paragraph and character styles.

So in InDesign, I’ll zoom in to that first paragraph, through “great typography”. So I’ll select that right here. I can do this up here where I look up minion pro what we’re using. I can change this to italic. But now I need to define this style, so while this is selected with character styles, if you don’t know how to get character styles, it’s under window, style, character styles. Or window, styles, paragraph styles. We’ll make this one new character style, and we’re going to call it italic or emphasis. EM, EM is the emphasis is the general term for when you’re doing HTML. So now we have that. You’ll notice that it’s not assigned. I forgot to click apply to selection right here. We can assign it by selecting the word and then clicking italic. So now we need to see what other things are italic.

We’ll go back to the orginal article and go through this. “Follow this recipe.” So we’ll go back to InDesign. “Follow this recipe”. Double click the word and change it to italic. Go back to the article. Robert Bringhurst, the consummate typographer writes, typography exists to honor content. So we want “typography exists to honor content to be italic. Typography exists to honor content. Right here you’ll notice the little point of interest. Do you see I selected the period? When you change things to bold or italics, if there is a period, include that in the selection. It more comfortable; it looks awkward if everything else it italics. An italic period doesn’t look very different, but a bold period does. Include the period or the punctuation of a comma or something in there.

So you want to go through and make all the adjustments for italics. There are some others in here that we need to look at. You can go through and adjust everything italic as necessary. In the original document, we also have some things that are bold. Bold on the web is referred to as strong. So right here, right close to the bottom, “however, follow them, contrast, size, hierarchy, and space.” Those words are bold. So go back to InDesign, we’ll create a new character style. Scroll down here to the bottom. Contrast, size, hierarchy. We’ll make these bold. Then we have space. Let’s define this style. Contrast, size, hierarchy. Come over here, character style, apply to selection. We’re going to call this one bold. It’s referred to in HTML and CSS as strong. So we put that on there and select ok. Then we’ll double click here and do the “space”. Click bold strong.

Let’s reduce this. Double click on the hand so we have our bold and our italic. You need to look through your type and make any other changes that may be necessary. Some of the things you could look for are captions. Right here we’ve have “This post as an extended version”. So extended needs to be done in italic. There’s some other things here. I’m not going through that here in the video, but I want you to go through and make sure there is a style for everything you are using. There are going to be a couple other styles that you’re going need to add. You’re going to add one image with the caption here. You’re going to need to add a caption image. You’ll also need to add a block quote with the citation. So I’ll show you that now.

In InDesign we’ll select a piece here. I’ll put in an image in here. I’ll put a return for the image, and put the caption here. This is a caption. So on the caption; I want this to be a different size. I’m going to make it 10 point and I’ll make it italic. There’s nothing magic about that, but this is a caption. This is not a character style because it selects the whole line, or paragraph. So we want to add this in paragraph styles. We’ll make this a new paragraph style. Turn on this “based on” to No paragraph style. Change this to caption and select ok.

So we’re going to use this a little later. Let’s go to the Robert Bringhurst quote. We’ll use that quote as a block quote. That was towards the end I believe. So we have typography exists to honor content. We’ll select this and copy it. Return and then add that right here. We want to make this larger. We’re going to get rid of the italic. Just make it regular. We’re going to make it larger and small caps. Let’s do that. Let’s try 14 point and then we can go in paragraph styles and make a new paragraph style and call it blockquote. Blockquote is an HTML and CSS term. You want to use that tag exactly the same. Right here you can see that we have advanced character options. Basic character options. Right here, case. Under case you can say small caps. When you do that it will change it to small caps here because I have preview here. I don’t want this to be italic, it’s italic because I left the character style on. Let me show you how to fix that. If we go over here to character you’ll see that this is italics and we’ll say none, and that will fix this right here. The next thing you want to do is a cite. A cite is the person that said this. So I’ll select Robert Bringhurst. I’ll put a hyphen and place. This should actually be an m dash. We’ll cover that later. That’s maybe a little advance. Just recognize that’s something different. We’re going to make this 8 point. So we’ll go 8 point and this is going to be a character style. So we’re going to change this right here and we’re going to say new character style. We want this character style to be the same as this accept a point. We’ll call it cite. That is also an HTML tag right there.

Let’s check this out. This right here is selected as cite. This here, if we select the whole line, the select is block quote. You’ll notice this plus right here, what that means is that we said this is going to be all caps, and then this is not all caps. Everything in the selection is not blockquote. If you turn off the style and then select blockquote again, you’ll see that this makes this all small caps. What if we want it upper and lower case instead of large and small caps. What we would want to do is unselect everything, select the arrow. Go back to our site. Double click on cite. I don’t have anything selected. Basic character formats, we’re going to change the case to normal. Do you see what that did? Did it change that one selection to normal?

That’s probably enough for now. Work through that. This is step one of project 4. SO if you’ve a series of character styles and a series of paragraph styles and they’re applied to this document, that’s what you need for project 4 step 1.